<script setup>
import {onBeforeMount, ref} from "vue";
// import {countTodayApi as memberCountTodayApi, countTotalApi as memberCountTotalApi} from "@/api/member";
// import {countTodayApi as orderCountTodayApi, countTotalApi as orderCountTotalApi} from "@/api/order";
//import {countGenderApi} from "../api/member";
//import {countStarApi} from "../api/course";
import {PROJECT_SKILLS} from "../const";
import {getResponseData, pieChartOption, barChartOption} from "../util/index.js";
import {attendanceOfClassApi, studentOfGradeApi} from "../api/statistics.js";
import {totalStudentApi, livingStudentApi, livingClazzApi, livingEmpApi} from "../api/statistics.js";
import * as echarts from 'echarts';

/* ==================== 统计组件数据 ==================== */

// 全部学生总数 + 在培学生总数 + 在职班级总数 + 在职员工总数
const totalStudentCount = ref(0), totalStudentIncrease = ref(0);
const livingStudentCount = ref(0), livingStudentIncrease = ref(0);
const livingClazzCount = ref(0), livingClazzIncrease = ref(0);
const livingEmpCount = ref(0), livingEmpIncrease = ref(0);
// 统计组件数据列表
let statisticCards = ref([
  {value: totalStudentCount, title: '全部学生总数（人）', content: '展示全部学生总数', increase: totalStudentIncrease},
  {value: livingStudentCount, title: '在培学生总数（人）', content: '展示在培学生总数', increase: livingStudentIncrease},
  {value: livingClazzCount, title: '在职班级总数（个）', content: '展示在职班级总数', increase: livingClazzIncrease},
  {value: livingEmpCount, title: '在职员工总数（人）', content: '展示在职员工总数', increase: livingEmpIncrease},
]);

// 获取统计组件数据: 获取日增会员数量 + 日增会员数量 + 会员总数 + 订单总数
async function getStatisticCardData() {
  let totalStudentData = getResponseData(await totalStudentApi());
  if (totalStudentData) {
    totalStudentCount.value = totalStudentData['totalStudent'];
    totalStudentIncrease.value = totalStudentData['increase'];
  }
  let livingStudentData = getResponseData(await livingStudentApi());
  if (livingStudentData) {
    livingStudentCount.value = livingStudentData['livingStudent'];
    livingStudentIncrease.value = livingStudentData['increase'];
  }
  let livingClazzData = getResponseData(await livingClazzApi());
  if (livingClazzData) {
    livingClazzCount.value = livingClazzData['livingClazz'];
    livingClazzIncrease.value = livingClazzData['increase'];
  }
  let livingEmpData = getResponseData(await livingEmpApi());
  if (livingEmpData) {
    livingEmpCount.value = livingEmpData['livingEmp'];
    livingEmpIncrease.value = livingEmpData['increase'];
  }
}

/* ==================== 统计图表数据 ==================== */

// 统计年级-学生分布: 发送请求 + 绘制饼图
async function getStudentOfGradeData() {
  let data = getResponseData(await studentOfGradeApi());
  if (data) {
    const option = pieChartOption({
          'data': data,
          'name': '年级 - 学生数'
        }
    );
    echarts.init(document.querySelector('#gradeStudentBoard')).setOption(option);
  }

}

// 统计课程评分: 发送请求 + 准备X轴数据和Y轴数据 + 绘制柱图
async function getAttendanceOfClassData() {
  let data = getResponseData(await attendanceOfClassApi());
  if (data) {

    // 准备X轴数据和Y轴数据
    let xData = [], yData = [];
    for (let i in data) {
      xData.push(data[i]['name']);
      yData.push(data[i]['value']);
    }

    // 绘制柱图
    const option = barChartOption({
      'xData': xData,
      'yData': yData,
      'name': '班级 - 出勤率',
      'xName': '班级',
      'yName': '出勤率',
    });
    echarts.init(document.querySelector('#courseStarBoard')).setOption(option);
  }
}

/* ==================== 加载函数 ==================== */

onBeforeMount(() => {
  getStatisticCardData();
  getStudentOfGradeData();
  getAttendanceOfClassData();
});
</script>

<template>
  <section class="board-head">
    <el-row :gutter="16">
      <el-col :span="6" v-for="statisticCard in statisticCards">
        <div class="statistic-card">
          <el-statistic class="statistic-body" :value="statisticCard['value']">
            <template #title>
              <el-link icon="InfoFilled" :underline="false" :title="statisticCard['content']">
                &nbsp;{{ statisticCard['title'] }}
              </el-link>
            </template>
          </el-statistic>
          <div class="statistic-footer">
            <div class="footer-item">
              <span>对比去年数据</span>
              <span :class="statisticCard['increase'] > 0 ? 'green': 'red'">
                <span>{{ statisticCard['increase'] }}</span>
                <el-icon>
                  <component :is="statisticCard['increase'] > 0 ? 'CaretTop': 'CaretBottom'"/>
                </el-icon>
              </span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </section>
  <section class="board-body">
    <el-row :gutter="16">
      <el-col class="chart-board" :span="12">
        <el-divider>
          <el-button link icon="PieChart">年级 - 学生数 · 图例</el-button>
        </el-divider>
        <div id="gradeStudentBoard" class="board"/>
      </el-col>
      <el-col class="chart-board" :span="12">
        <el-divider>
          <el-button link icon="Histogram">班级 - 出勤率 · 图例</el-button>
        </el-divider>
        <div id="courseStarBoard" class="board"/>
      </el-col>
    </el-row>
  </section>
</template>

<style scoped lang="scss">
.board-head {
  margin-bottom: 40px; // 下外边距

  .el-statistic {
    --el-statistic-content-font-size: 30px; // value字号

    .el-icon {
      margin-left: 4px; // 左外边距
    }
  }

  .statistic-card {
    height: 100%; // 高度
    border-radius: 4px; // 圆角
    background-color: var(--el-bg-color-overlay); // 背景色
    padding: 20px 20px 0; // 上内边距，左右内边距，下内边距
    text-align: center; // 内容居中
  }

  .statistic-footer {
    display: flex; // flex布局
    justify-content: center; // 左右居中
    flex-wrap: wrap; // flex环绕
    font-size: 12px; // 字号
    color: var(--el-text-color-regular); // 前景色
    margin-top: 16px; // 上外边距
  }

  .statistic-footer .footer-item span:last-child {
    display: inline-flex; // flex布局
    align-items: center; // 居中
    margin-left: 4px; // 左外边距
  }

  .green {
    color: var(--el-color-success); // 绿色
  }

  .red {
    color: var(--el-color-error); // 红色
  }
}

.board-body {
  height: 500px; // 高度

  .board {
    width: 100%; // 宽度
    height: 447px; // 高度
    border: 1px solid #5470C6; // 边框
  }

  .foot-divider-tip {
    padding-bottom: 50px; // 下外边距
  }
}
</style>